<template>
	<view class="u-p-30 form-page">
		<u-form :model="formData" ref="uForm" :label-width="200">
			<u-form-item v-for="(item, index) in filedList.fields"
				:key="index"
				v-show="!item.__config__.noShow && item.__config__.jnpfKey != 'billRule'"
				:label="item.__config__.label"
				:required="item.__config__.required">
				<template v-if="getRead(item.__vModel__) && item.__config__.jnpfKey === 'numInput'">
					<u-input type="number" v-model="formData[item.__vModel__]" placeholder="请输入数字"
						:maxlength="item.maxlength||controlProerty.maxlength">
					</u-input>
				</template>
				<template v-if="getRead(item.__vModel__) && item.__config__.jnpfKey === 'textarea'">
					<u-input type="textarea" :placeholder="item.placeholder" v-model="formData[item.__vModel__]"
						:maxlength="item.maxlength||controlProerty.maxlength"></u-input>
				</template>
				<template v-if="getRead(item.__vModel__) && item.__config__.jnpfKey === 'select'">
					<form-select
						:placeholder="item.placeholder"
						:options="item.__slot__.options"
						:label-name="item.__config__.props.label"
						:value-name="item.__config__.props.value"
						v-model="formData[item.__vModel__]">
					</form-select>
				</template>
				<template v-if="getRead(item.__vModel__) && item.__config__.jnpfKey === 'date'">
					<form-select-date :placeholder="item.placeholder" v-model="formData[item.__vModel__]"></form-select-date>
				</template>
				<template v-if="getRead(item.__vModel__) && item.__config__.jnpfKey === 'userSelect'">
					<form-select-user :placeholder="item.placeholder" v-model="formData[item.__vModel__]">
					</form-select-user>
				</template>
				<template
					v-if="getRead(item.__vModel__) && 'createUser,createTime,billRule'.indexOf(item.__config__.jnpfKey) !== -1">
					<u-input type="text"
						:placeholder="item.placeholder"
						disabled
						v-model="formData[item.__vModel__]"></u-input>
				</template>
			</u-form-item>
		</u-form>
		<view class="form-foot u-flex">
			<view class="u-flex-1 form-btn form-save-btn" @tap="$u.debounce(save, 600)">
				保存
			</view>
			<view class="u-flex-1 form-btn form-submit-btn" @tap="$u.debounce(submit, 600)">
				提交
			</view>
		</view>
	</view>
</template>

<script>
	import formSelect from "../../components/form-select.vue"
	import formSelectDate from "../../components/form-select-date.vue"
	import formSelectUser from "../../components/form-select-user.vue"

	export default {
		components: {
			formSelect,
			formSelectDate,
			formSelectUser
		},
		data() {
			return {
				formId: '',
				flowId: '',
				formOperates: [],
				filedList: {
					fields: []
				},
				freeApprover: 0,
				formData: {},
				controlProerty: { //控件属性
					maxlength: 50,
				},
				dateShows: [],
				requiredList: [],
				dateKey: []
			}
		},
		methods: {
			getRead(id) {
				const _res = this.formOperates.find(item => {
					return item.id === id
				})
				return _res?_res.read:false
			},
			save() {
				this.submitType(1)
			},
			submit() {
				this.submitType(0)
			},
			submitType(pType) {
				let requiredErr = false
				let ErrMsg = ''
				
				for (const item of this.requiredList) {
					if (this.formData[item.key] === '') {
						requiredErr = true
						ErrMsg = item.label + '为必填!'
						break
					}
				}
				if (requiredErr) {
					this.$u.toast(ErrMsg)
				} else {
					
					let _formData = this.$u.deepClone(this.formData)
					
					for(const key in _formData) {
						if (this.dateKey.indexOf(key) !== -1) {
							_formData[key] = new Date(_formData[key]).getTime()
						}
					}
					
					let _submitData = {
						status: pType,
						flowId: this.flowId,
						data: JSON.stringify(_formData)
					}
					
					if (this.formId === '') {
						this.$u.api.postFlowTask(_submitData).then(res => {
							this.$u.toast(res.msg)
							this.$u.route('pages/work/flowchart/started')
						}).catch(err => {
							console.error(err)
						})
					} else {
						_submitData.id = this.formId
						// console.log(_submitData)
						this.$u.api.putFlowTask(this.formId, _submitData).then(res => {
							this.$u.toast(res.msg)
							this.$u.route('pages/work/flowchart/started')
						}).catch(err => {
							console.error(err)
						})
					}
				}
			}
		},
		onLoad(options) {
			// option.type == 'add'
			// console.log(option.pForm)
			if (options.id) {
				this.flowId = options.id
				uni.setNavigationBarTitle({
					title: options.title
				})
				
				this.$u.api.getFlowEngine(options.id).then(res => {
					// 字段权限
					this.formOperates = JSON.parse(res.flowTemplateJson).childNode.properties.formOperates
					// 表单信息
					this.filedList = JSON.parse(res.formData)
					
					// 加签
					this.freeApprover = res.freeApprover
				
					// 初始化formData
					for (let item of this.filedList.fields) {
						this.$set(this.formData, item.__vModel__, '')
						if (item.__config__.required) {
							this.requiredList.push({
								key: item.__vModel__,
								label: item.__config__.label
							})
						}
						if (item.__config__.jnpfKey === 'date') {
							this.dateKey.push(item.__vModel__)
						}
					}
					if (options.formId) {
						this.$u.api.getFlowTask(options.formId).then(res => {
							this.formId = res.id
							const _formData = JSON.parse(res.data)
							for(const key in this.formData) {
								this.formData[key] = _formData[key]
							}
						}).catch(err => {
							console.error(err)
						})
					}
				}).catch(err => {
					console.error(err)
				})
			}
		}
	}
</script>

<style>
	page {
		padding-bottom: 100rpx;
	}
</style>

<style lang="scss" scoped>
	.form-page {
		background-color: #FFFFFF;
	}

	.form-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 100rpx;

		.form-btn {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.form-save-btn {
			background-color: #FFFFFF;
		}

		.form-submit-btn {
			color: #FFFFFF;
			background-color: #0071C5;
		}
	}
</style>
